<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>面试官：DOM常见的操作有哪些？ | vivace-itnerview</title>
    <meta name="description" content="interview docs">
    <link rel="stylesheet" href="/assets/style.f9ffe3f5.css">
    <link rel="modulepreload" href="/assets/chunks/VPAlgoliaSearchBox.ea0e7bf0.js">
    <link rel="modulepreload" href="/assets/app.1cdb2ec5.js">
    <link rel="modulepreload" href="/assets/JavaScript_Dom.md.115217f2.lean.js">
    
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-ca9ccb7e><!--[--><!--]--><!--[--><span tabindex="-1" data-v-151f2593></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-151f2593> Skip to content </a><!--]--><!----><header class="VPNav" data-v-ca9ccb7e data-v-a71a30f1><div class="VPNavBar has-sidebar" data-v-a71a30f1 data-v-a35e6f52><div class="container" data-v-a35e6f52><div class="VPNavBarTitle has-sidebar" data-v-a35e6f52 data-v-d5925166><a class="title" href="/" data-v-d5925166><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" data-v-e13a1912><!--]--><!--[-->Web Interview<!--]--><!--[--><!--]--></a></div><div class="content" data-v-a35e6f52><!--[--><!--]--><div class="VPNavBarSearch search" data-v-a35e6f52 style="--38a1667b:&#39;Meta&#39;;"><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-a35e6f52 data-v-f83db6ba><span id="main-nav-aria-label" class="visually-hidden" data-v-f83db6ba>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/css/box.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->CSS<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> JavaScript <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/JavaScript/data_type.html" data-v-e8e0fb1d data-v-3c355974><!--[-->JavaScript<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/es6/var_let_const.html" data-v-e8e0fb1d data-v-3c355974><!--[-->es6<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/typescript/typescript_javascript.html" data-v-e8e0fb1d data-v-3c355974><!--[-->Typescript<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-f83db6ba data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-6ffb57d3><span class="text" data-v-6ffb57d3><!----> 框架 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-6ffb57d3><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><div class="items" data-v-1c5d0cfc><!--[--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/vue/vue.html" data-v-e8e0fb1d data-v-3c355974><!--[-->Vue<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/vue3/goal.html" data-v-e8e0fb1d data-v-3c355974><!--[-->Vue3<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/React/React.html" data-v-e8e0fb1d data-v-3c355974><!--[-->React<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-1c5d0cfc data-v-e8e0fb1d><a class="VPLink link" href="/webpack/webpack.html" data-v-e8e0fb1d data-v-3c355974><!--[-->webpack<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/NodeJS/nodejs.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->node<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/algorithm/Algorithm.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Algorithm<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/applet/applet.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->小程序<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/http/HTTP_HTTPS.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->http<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/git/version_control.html" data-v-f83db6ba data-v-47a2263e data-v-3c355974><!--[-->Git<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-a35e6f52 data-v-a3e7452b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-a3e7452b data-v-968780f1 data-v-086e8519><span class="check" data-v-086e8519><span class="icon" data-v-086e8519><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-968780f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-968780f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-a35e6f52 data-v-738bef5a data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/xiumubai" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-a35e6f52 data-v-e89b88d7 data-v-6ffb57d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-6ffb57d3><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-6ffb57d3><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-6ffb57d3><div class="VPMenu" data-v-6ffb57d3 data-v-1c5d0cfc><!----><!--[--><!--[--><!----><div class="group" data-v-e89b88d7><div class="item appearance" data-v-e89b88d7><p class="label" data-v-e89b88d7>Appearance</p><div class="appearance-action" data-v-e89b88d7><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-label="toggle dark mode" data-v-e89b88d7 data-v-968780f1 data-v-086e8519><span class="check" data-v-086e8519><span class="icon" data-v-086e8519><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-968780f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-968780f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-e89b88d7><div class="item social-links" data-v-e89b88d7><div class="VPSocialLinks social-links-list" data-v-e89b88d7 data-v-f6988cfb><!--[--><a class="VPSocialLink" href="https://github.com/xiumubai" target="_blank" rel="noopener" data-v-f6988cfb data-v-e57698f6><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-a35e6f52 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-ca9ccb7e data-v-aac27d5e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-aac27d5e><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-aac27d5e><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-aac27d5e>Menu</span></button><a class="top-link" href="#" data-v-aac27d5e> Return to top </a></div><aside class="VPSidebar" data-v-ca9ccb7e data-v-f332cb62><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-f332cb62><span class="visually-hidden" id="sidebar-aria-label" data-v-f332cb62> Sidebar Navigation </span><!--[--><div class="group" data-v-f332cb62><section class="VPSidebarGroup collapsible" data-v-f332cb62 data-v-2976c796><div class="title" role="button" data-v-2976c796><h2 class="title-text" data-v-2976c796>JavaScript 系列</h2><div class="action" data-v-2976c796><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 24 24" class="icon minus" data-v-2976c796><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon plus" data-v-2976c796><path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z"></path><path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z"></path></svg></div></div><div class="items" data-v-2976c796><!--[--><a class="VPLink link link" href="/JavaScript/data_type.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>1.说说JavaScript中的数据类型？存储上的差别？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/array_api.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>2.数组的常用方法有哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/string_api.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>3.JavaScript字符串的常用方法有哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/type_conversion.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>4.谈谈 JavaScript 中的类型转换机制</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/compare.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>5.== 和 ===区别，分别在什么情况使用</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/copy.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>6.深拷贝浅拷贝的区别？如何实现一个深拷贝？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/closure.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>7.说说你对闭包的理解？闭包使用场景</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/scope.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>8.说说你对作用域链的理解</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/prototype.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>9.JavaScript原型，原型链 ? 有什么特点？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/inherit.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>10.Javascript如何实现继承？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/this.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>11.谈谈this对象的理解</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/context_stack.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>12.JavaScript中执行上下文和执行栈是什么？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/event_Model.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>13.说说JavaScript中的事件模型</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/typeof_instanceof.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>14.typeof 与 instanceof 区别</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/event_agent.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>15.解释下什么是事件代理？应用场景？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/new.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>16.说说new操作符具体干了什么？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/ajax.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>17.ajax原理是什么？如何实现？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/bind_call_apply.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>18.bind、call、apply 区别？如何实现一个bind?</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/regexp.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>19.说说你对正则表达式的理解？应用场景？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/event_loop.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>20.说说你对事件循环的理解</span><!----><!--]--><!----></a><a class="VPLink link link active" href="/JavaScript/Dom.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>21.DOM常见的操作有哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/BOM.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>22.说说你对BOM的理解，常见的BOM对象你了解哪些？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/tail_recursion.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>23.举例说明你对尾递归的理解，有哪些应用场景</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/memory_leak.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>24.说说 JavaScript 中内存泄漏的几种情况？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/cache.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>25.Javascript本地存储的方式有哪些？区别及应用场景？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/functional_programming.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>26.说说你对函数式编程的理解？优缺点？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/function_cache.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>27.Javascript中如何实现函数缓存？函数缓存有哪些应用场景？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/loss_accuracy.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>28.说说 Javascript 数字精度丢失的问题，如何解决？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/debounce_throttle.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>29.什么是防抖和节流？有什么区别？如何实现？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/visible.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>30.如何判断一个元素是否在可视区域中？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/continue_to_upload.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>31.大文件上传如何做断点续传？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/pull_up_loading_pull_down_refresh.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>32.如何实现上拉加载，下拉刷新？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/single_sign.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>33.什么是单点登录？如何实现？</span><!----><!--]--><!----></a><a class="VPLink link link" href="/JavaScript/security.html" data-v-2976c796 data-v-f7e544fc data-v-3c355974><!--[--><span class="link-text" data-v-f7e544fc>34.web常见的攻击方式有哪些？如何防御？</span><!----><!--]--><!----></a><!--]--></div></section></div><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-ca9ccb7e data-v-c95df128><div class="VPDoc has-sidebar has-aside" data-v-c95df128 data-v-f0af2311><div class="container" data-v-f0af2311><div class="aside" data-v-f0af2311><div class="aside-curtain" data-v-f0af2311></div><div class="aside-container" data-v-f0af2311><div class="aside-content" data-v-f0af2311><div class="VPDocAside" data-v-f0af2311 data-v-aea49c31><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline has-outline" data-v-aea49c31 data-v-a3de185c><div class="content" data-v-a3de185c><div class="outline-marker" data-v-a3de185c></div><div class="outline-title" data-v-a3de185c>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-a3de185c><span class="visually-hidden" id="doc-outline-aria-label" data-v-a3de185c> Table of Contents for current page </span><ul class="root" data-v-a3de185c><!--[--><li data-v-a3de185c><a class="outline-link" href="#一、dom" data-v-a3de185c>一、DOM</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#二、操作" data-v-a3de185c>二、操作</a><!----></li><li data-v-a3de185c><a class="outline-link" href="#相关链接" data-v-a3de185c>相关链接</a><!----></li><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-aea49c31></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-f0af2311><div class="content-container" data-v-f0af2311><!--[--><!--]--><main class="main" data-v-f0af2311><div style="position:relative;" class="vp-doc _JavaScript_Dom" data-v-f0af2311><div><h1 id="面试官：dom常见的操作有哪些？" tabindex="-1">面试官：DOM常见的操作有哪些？ <a class="header-anchor" href="#面试官：dom常见的操作有哪些？" aria-hidden="true">#</a></h1><p><img src="https://static.vue-js.com/a89c99a0-7fdc-11eb-ab90-d9ae814b240d.png" alt=""></p><h2 id="一、dom" tabindex="-1">一、DOM <a class="header-anchor" href="#一、dom" aria-hidden="true">#</a></h2><p>文档对象模型 (DOM) 是 <code>HTML</code> 和 <code>XML</code> 文档的编程接口</p><p>它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容</p><p>任何 <code>HTML </code>或<code>XML</code>文档都可以用 <code>DOM </code>表示为一个由节点构成的层级结构</p><p>节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系，如下所示：</p><div class="language-html"><button class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Page</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">head</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Hello World!</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><p><code>DOM</code>像原子包含着亚原子微粒那样，也有很多类型的<code>DOM</code>节点包含着其他类型的节点。接下来我们先看看其中的三种：</p><div class="language-html"><button class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">title</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        content</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><p>上述结构中，<code>div</code>、<code>p</code>就是元素节点，<code>content</code>就是文本节点，<code>title</code>就是属性节点</p><h2 id="二、操作" tabindex="-1">二、操作 <a class="header-anchor" href="#二、操作" aria-hidden="true">#</a></h2><p>日常前端开发，我们都离不开<code>DOM</code>操作</p><p>在以前，我们使用<code>Jquery</code>，<code>zepto</code>等库来操作<code>DOM</code>，之后在<code>vue</code>，<code>Angular</code>，<code>React</code>等框架出现后，我们通过操作数据来控制<code>DOM</code>（绝大多数时候），越来越少的去直接操作<code>DOM</code></p><p>但这并不代表原生操作不重要。相反，<code>DOM</code>操作才能有助于我们理解框架深层的内容</p><p>下面就来分析<code>DOM</code>常见的操作，主要分为：</p><ul><li>创建节点</li><li>查询节点</li><li>更新节点</li><li>添加节点</li><li>删除节点</li></ul><h3 id="创建节点" tabindex="-1">创建节点 <a class="header-anchor" href="#创建节点" aria-hidden="true">#</a></h3><h4 id="createelement" tabindex="-1">createElement <a class="header-anchor" href="#createelement" aria-hidden="true">#</a></h4><p>创建新元素，接受一个参数，即要创建元素的标签名</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> divEl </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">div</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h4 id="createtextnode" tabindex="-1">createTextNode <a class="header-anchor" href="#createtextnode" aria-hidden="true">#</a></h4><p>创建一个文本节点</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> textEl </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createTextNode</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">content</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h4 id="createdocumentfragment" tabindex="-1">createDocumentFragment <a class="header-anchor" href="#createdocumentfragment" aria-hidden="true">#</a></h4><p>用来创建一个文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，然后把文档碎片的内容一次性添加到<code>DOM</code>中</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> fragment </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createDocumentFragment</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><p>当请求把一个<code>DocumentFragment</code> 节点插入文档树时，插入的不是 <code>DocumentFragment </code>自身，而是它的所有子孙节点</p><h4 id="createattribute" tabindex="-1">createAttribute <a class="header-anchor" href="#createattribute" aria-hidden="true">#</a></h4><p>创建属性节点，可以是自定义属性</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> dataAttribute </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createAttribute</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">custom</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">consle</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(dataAttribute)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h3 id="获取节点" tabindex="-1">获取节点 <a class="header-anchor" href="#获取节点" aria-hidden="true">#</a></h3><h4 id="queryselector" tabindex="-1">querySelector <a class="header-anchor" href="#queryselector" aria-hidden="true">#</a></h4><p>传入任何有效的<code> css</code> 选择器，即可选中单个 <code>DOM </code>元素（首个）：</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">.element</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#element</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">div</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">[name=&quot;username&quot;]</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">div + p &gt; span</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre></div><p>如果页面上没有指定的元素时，返回 <code>null</code></p><h4 id="queryselectorall" tabindex="-1">querySelectorAll <a class="header-anchor" href="#queryselectorall" aria-hidden="true">#</a></h4><p>返回一个包含节点子树内所有与之相匹配的<code>Element</code>节点列表，如果没有相匹配的，则返回一个空节点列表</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> notLive </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelectorAll</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">p</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><p>需要注意的是，该方法返回的是一个 <code>NodeList </code>的静态实例，它是一个静态的“快照”，而非“实时”的查询</p><p>关于获取<code>DOM</code>元素的方法还有如下，就不一一述说</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">id属性值</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">返回拥有指定id的对象的引用</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementsByClassName</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">class属性值</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">返回拥有指定class的对象集合</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementsByTagName</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">标签名</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">返回拥有指定标签名的对象集合</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementsByName</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">name属性值</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> 返回拥有指定名称的对象结合</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">element</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelector</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">CSS选择器</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">  仅返回第一个匹配的元素</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">element</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">querySelectorAll</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">CSS选择器</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">   返回所有匹配的元素</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">documentElement</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">  获取页面中的HTML标签</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">body</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> 获取页面中的BODY标签</span></span>
<span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">all[</span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">  获取页面中的所有元素节点的对象集合型</span></span>
<span class="line"></span></code></pre></div><p>除此之外，每个<code>DOM</code>元素还有<code>parentNode</code>、<code>childNodes</code>、<code>firstChild</code>、<code>lastChild</code>、<code>nextSibling</code>、<code>previousSibling</code>属性，关系图如下图所示</p><p><img src="https://static.vue-js.com/c100f450-7fdc-11eb-ab90-d9ae814b240d.png" alt=""></p><h3 id="更新节点" tabindex="-1">更新节点 <a class="header-anchor" href="#更新节点" aria-hidden="true">#</a></h3><h4 id="innerhtml" tabindex="-1">innerHTML <a class="header-anchor" href="#innerhtml" aria-hidden="true">#</a></h4><p>不但可以修改一个<code>DOM</code>节点的文本内容，还可以直接通过<code>HTML</code>片段修改<code>DOM</code>节点内部的子树</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#676E95;">// 获取&lt;p id=&quot;p&quot;&gt;...&lt;/p &gt;</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> p </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">p</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;">// 设置文本为abc:</span></span>
<span class="line"><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ABC</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// &lt;p id=&quot;p&quot;&gt;ABC&lt;/p &gt;</span></span>
<span class="line"><span style="color:#676E95;">// 设置HTML:</span></span>
<span class="line"><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ABC &lt;span style=&quot;color:red&quot;&gt;RED&lt;/span&gt; XYZ</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;">// &lt;p&gt;...&lt;/p &gt;的内部结构已修改</span></span>
<span class="line"></span></code></pre></div><h4 id="innertext、textcontent" tabindex="-1">innerText、textContent <a class="header-anchor" href="#innertext、textcontent" aria-hidden="true">#</a></h4><p>自动对字符串进行<code>HTML</code>编码，保证无法设置任何<code>HTML</code>标签</p><div class="language-"><button class="copy"></button><span class="lang"></span><pre><code><span class="line"><span style="color:#A6ACCD;">// 获取&lt;p id=&quot;p-id&quot;&gt;...&lt;/p &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">var p = document.getElementById(&#39;p-id&#39;);</span></span>
<span class="line"><span style="color:#A6ACCD;">// 设置文本:</span></span>
<span class="line"><span style="color:#A6ACCD;">p.innerText = &#39;&lt;script&gt;alert(&quot;Hi&quot;)&lt;/script&gt;&#39;;</span></span>
<span class="line"><span style="color:#A6ACCD;">// HTML被自动编码，无法设置一个&lt;script&gt;节点:</span></span>
<span class="line"><span style="color:#A6ACCD;">// &lt;p id=&quot;p-id&quot;&gt;&amp;lt;script&amp;gt;alert(&quot;Hi&quot;)&amp;lt;/script&amp;gt;&lt;/p &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"></span></span></code></pre></div><p>两者的区别在于读取属性时，<code>innerText</code>不返回隐藏元素的文本，而<code>textContent</code>返回所有文本</p><h4 id="style" tabindex="-1">style <a class="header-anchor" href="#style" aria-hidden="true">#</a></h4><p><code>DOM</code>节点的<code>style</code>属性对应所有的<code>CSS</code>，可以直接获取或设置。遇到<code>-</code>需要转化为驼峰命名</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#676E95;">// 获取&lt;p id=&quot;p-id&quot;&gt;...&lt;/p &gt;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> p </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">p-id</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;">// 设置CSS:</span></span>
<span class="line"><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">color </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#ff0000</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">fontSize </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">20px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// 驼峰命名</span></span>
<span class="line"><span style="color:#A6ACCD;">p</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">style</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">paddingTop </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">2em</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h3 id="添加节点" tabindex="-1">添加节点 <a class="header-anchor" href="#添加节点" aria-hidden="true">#</a></h3><h4 id="innerhtml-1" tabindex="-1">innerHTML <a class="header-anchor" href="#innerhtml-1" aria-hidden="true">#</a></h4><p>如果这个DOM节点是空的，例如，<code>&lt;div&gt;&lt;/div&gt;</code>，那么，直接使用<code>innerHTML = &#39;&lt;span&gt;child&lt;/span&gt;&#39;</code>就可以修改<code>DOM</code>节点的内容，相当于添加了新的<code>DOM</code>节点</p><p>如果这个DOM节点不是空的，那就不能这么做，因为<code>innerHTML</code>会直接替换掉原来的所有子节点</p><h4 id="appendchild" tabindex="-1">appendChild <a class="header-anchor" href="#appendchild" aria-hidden="true">#</a></h4><p>把一个子节点添加到父节点的最后一个子节点</p><p>举个例子</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;!--</span><span style="color:#A6ACCD;"> HTML结构 </span><span style="color:#89DDFF;">--&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">JavaScript</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">list</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">java</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Java</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">python</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Python</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">scheme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Scheme</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><p>添加一个<code>p</code>元素</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> js </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">js</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerHTML </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">JavaScript</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> list </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">list</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">list</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#A6ACCD;">(js)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><p>现在<code>HTML</code>结构变成了下面</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;!--</span><span style="color:#A6ACCD;"> HTML结构 </span><span style="color:#89DDFF;">--&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">list</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">java</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Java</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">python</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Python</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">scheme</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Scheme</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">JavaScript</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">p</span><span style="color:#89DDFF;"> &gt;</span><span style="color:#A6ACCD;">  &lt;!-- 添加元素 --&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div><p>上述代码中，我们是获取<code>DOM</code>元素后再进行添加操作，这个<code>js</code>节点是已经存在当前文档树中，因此这个节点首先会从原先的位置删除，再插入到新的位置</p><p>如果动态添加新的节点，则先创建一个新的节点，然后插入到指定的位置</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> list </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">list</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">const haskell </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">createElement</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">p</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">haskell</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">id </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">haskell</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">haskell</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">innerText </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Haskell</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">list</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">appendChild</span><span style="color:#A6ACCD;">(haskell)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div><h4 id="insertbefore" tabindex="-1">insertBefore <a class="header-anchor" href="#insertbefore" aria-hidden="true">#</a></h4><p>把子节点插入到指定的位置，使用方法如下：</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#A6ACCD;">parentElement</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">insertBefore</span><span style="color:#A6ACCD;">(newElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> referenceElement)</span></span>
<span class="line"></span></code></pre></div><p>子节点会插入到<code>referenceElement</code>之前</p><h4 id="setattribute" tabindex="-1">setAttribute <a class="header-anchor" href="#setattribute" aria-hidden="true">#</a></h4><p>在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> div </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">id</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"><span style="color:#A6ACCD;">div</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setAttribute</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">class</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">white</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#676E95;">//第一个参数属性名，第二个参数属性值。</span></span>
<span class="line"></span></code></pre></div><h3 id="删除节点" tabindex="-1">删除节点 <a class="header-anchor" href="#删除节点" aria-hidden="true">#</a></h3><p>删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的<code>removeChild</code>把自己删掉</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><code><span class="line"><span style="color:#676E95;">// 拿到待删除节点:</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> self </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">to-be-removed</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;">// 拿到父节点:</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> parent </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> self</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">parentElement</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;">// 删除:</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> removed </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> parent</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">removeChild</span><span style="color:#A6ACCD;">(self)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">removed </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> self</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// true</span></span>
<span class="line"></span></code></pre></div><p>删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置</p><h2 id="相关链接" tabindex="-1">相关链接 <a class="header-anchor" href="#相关链接" aria-hidden="true">#</a></h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model" target="_blank" rel="noreferrer">https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model</a></p></div></div></main><!--[--><!--]--><footer class="VPDocFooter" data-v-f0af2311 data-v-a54a85bd><div class="edit-info" data-v-a54a85bd><!----><div class="last-updated" data-v-a54a85bd><p class="VPLastUpdated" data-v-a54a85bd data-v-f7d51a9c>Last updated: <time datatime="2022-09-22T09:43:18.000Z" data-v-f7d51a9c></time></p></div></div><div class="prev-next" data-v-a54a85bd><div class="pager" data-v-a54a85bd><a class="pager-link prev" href="/JavaScript/event_loop.html" data-v-a54a85bd><span class="desc" data-v-a54a85bd>Previous page</span><span class="title" data-v-a54a85bd>20.说说你对事件循环的理解</span></a></div><div class="has-prev pager" data-v-a54a85bd><a class="pager-link next" href="/JavaScript/BOM.html" data-v-a54a85bd><span class="desc" data-v-a54a85bd>Next page</span><span class="title" data-v-a54a85bd>22.说说你对BOM的理解，常见的BOM对象你了解哪些？</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-ca9ccb7e data-v-9f24cc86><div class="container" data-v-9f24cc86><p class="message" data-v-9f24cc86>Released under the MIT License.</p><p class="copyright" data-v-9f24cc86>Copyright © 2022-present xiumubai</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"javascript_bom.md\":\"b4feb213\",\"javascript_dom.md\":\"115217f2\",\"javascript_ajax.md\":\"4cd66d00\",\"javascript_array_api.md\":\"fc7e9f5e\",\"javascript_bind_call_apply.md\":\"5037ea1f\",\"javascript_cache.md\":\"3cab1e33\",\"javascript_closure.md\":\"a011a286\",\"javascript_compare.md\":\"8bd00b66\",\"javascript_context_stack.md\":\"eff24dfd\",\"javascript_continue_to_upload.md\":\"8b9f775e\",\"javascript_copy.md\":\"9e6f3d4e\",\"javascript_data_type.md\":\"6773ee7f\",\"javascript_debounce_throttle.md\":\"37f66fe3\",\"javascript_event_model.md\":\"df25b298\",\"javascript_event_agent.md\":\"de86b13f\",\"javascript_event_loop.md\":\"ec105c46\",\"javascript_function_cache.md\":\"722b5929\",\"javascript_functional_programming.md\":\"74c57d2b\",\"javascript_inherit.md\":\"bfe04b52\",\"javascript_js_data_structure.md\":\"3d5793d5\",\"javascript_loss_accuracy.md\":\"4a5e1e83\",\"javascript_memory_leak.md\":\"7f468176\",\"javascript_new.md\":\"a7c10c2f\",\"javascript_prototype.md\":\"ba4aad9c\",\"javascript_pull_up_loading_pull_down_refresh.md\":\"bcd55b26\",\"javascript_regexp.md\":\"5cdd425f\",\"javascript_scope.md\":\"19d93e6d\",\"javascript_security.md\":\"5bc240c7\",\"javascript_single_sign.md\":\"22b66bf9\",\"javascript_string_api.md\":\"4431266e\",\"javascript_tail_recursion.md\":\"d10c1177\",\"javascript_this.md\":\"67dd8f3a\",\"javascript_type_conversion.md\":\"089b68ca\",\"javascript_typeof_instanceof.md\":\"a0ea8297\",\"javascript_visible.md\":\"1b8c1427\",\"nodejs_buffer.md\":\"86b6fada\",\"nodejs_eventemitter.md\":\"4424fd2c\",\"nodejs_stream.md\":\"b2fa0025\",\"nodejs_event_loop.md\":\"03c1b709\",\"nodejs_file_upload.md\":\"37ab2103\",\"nodejs_fs.md\":\"9221e437\",\"nodejs_global.md\":\"a1b3fd28\",\"nodejs_jwt.md\":\"d986798b\",\"nodejs_middleware.md\":\"c2c968c4\",\"nodejs_nodejs.md\":\"6ba067a4\",\"nodejs_paging.md\":\"8b76e487\",\"nodejs_performance.md\":\"fa9c1623\",\"nodejs_process.md\":\"3d717454\",\"nodejs_require_order.md\":\"6e9b880f\",\"react_binding events.md\":\"606997b9\",\"react_building components.md\":\"2460627f\",\"react_fiber.md\":\"e3a3ac5c\",\"react_high order components.md\":\"804cdc8c\",\"react_improve performance.md\":\"2b4cd579\",\"react_jsx to dom.md\":\"7da96f4e\",\"react_react hooks.md\":\"ac1889e4\",\"react_react router model.md\":\"d7e60a7d\",\"react_react router.md\":\"58e50995\",\"react_react refs.md\":\"a90f5a94\",\"react_react.md\":\"6c1f12f1\",\"react_real dom_virtual dom.md\":\"78c68534\",\"react_redux middleware.md\":\"f9c0c1a5\",\"react_syntheticevent.md\":\"937038a1\",\"react_animation.md\":\"51b808f8\",\"react_capture error.md\":\"ab82c7b3\",\"react_class_function component.md\":\"dec93b8e\",\"react_communication.md\":\"63ecc8dd\",\"react_controlled_uncontrolled.md\":\"929967ab\",\"react_diff.md\":\"6758822a\",\"react_how to use redux.md\":\"87b15e2e\",\"react_immutable.md\":\"32f831f3\",\"react_import css.md\":\"6b24701d\",\"react_improve_render.md\":\"0080c4c8\",\"react_key.md\":\"8b76383f\",\"react_life cycle.md\":\"ffcbc76b\",\"react_redux.md\":\"e2fcb8f3\",\"react_render.md\":\"a9b9a91f\",\"react_server side rendering.md\":\"1cbca1f2\",\"react_setstate.md\":\"03ba5fb6\",\"react_state_props.md\":\"b80f455f\",\"react_summary.md\":\"47a9aa61\",\"react_super()_super(props).md\":\"e5fd40c9\",\"algorithm_algorithm.md\":\"6f482d8b\",\"algorithm_binarysearch.md\":\"3a4c14f4\",\"algorithm_heap.md\":\"fe5839ed\",\"algorithm_linked list.md\":\"ec192250\",\"algorithm_bubblesort.md\":\"cf87b40d\",\"algorithm_design1.md\":\"bd491cfe\",\"algorithm_design2.md\":\"941bf6ba\",\"algorithm_graph.md\":\"ddab9801\",\"algorithm_insertionsort.md\":\"7ad6d0c6\",\"algorithm_mergesort.md\":\"d704839d\",\"algorithm_quicksort.md\":\"04e65ce9\",\"algorithm_selectionsort.md\":\"c751f8ed\",\"algorithm_set.md\":\"aa1a236e\",\"algorithm_sort.md\":\"69fbb06f\",\"algorithm_stack_queue.md\":\"09cb42c4\",\"algorithm_structure.md\":\"8ceb1498\",\"algorithm_time_space.md\":\"20afcad9\",\"algorithm_tree.md\":\"8880d846\",\"applet_webview_jscore.md\":\"b5d697c3\",\"applet_applet.md\":\"fd446e94\",\"applet_lifecycle.md\":\"fdf96326\",\"applet_login.md\":\"000d8413\",\"applet_navigate.md\":\"661447e1\",\"applet_optimization.md\":\"4483173a\",\"applet_publish.md\":\"75f5f978\",\"applet_requestpayment.md\":\"96dce311\",\"css_bfc.md\":\"be6458b1\",\"css_animation.md\":\"c69b6036\",\"css_box.md\":\"134dc0e2\",\"css_center.md\":\"671d90b4\",\"css_column_layout.md\":\"17662907\",\"css_css3_features.md\":\"07c233e8\",\"css_css_performance.md\":\"1e723fed\",\"css_dp_px_dpr_ppi.md\":\"baf193db\",\"css_em_px_rem_vh_vw.md\":\"d8841819\",\"css_flexbox.md\":\"60b4d3a2\",\"css_grid.md\":\"fe9da145\",\"css_hide_attributes.md\":\"294742dd\",\"css_layout_painting.md\":\"0b4c79e9\",\"css_less_12px.md\":\"0b872326\",\"css_responsive_layout.md\":\"a92ea8dd\",\"css_sass_less_stylus.md\":\"35f379b9\",\"css_selector.md\":\"17b6992a\",\"css_single_multi_line.md\":\"139fb49a\",\"css_triangle.md\":\"445f3e5e\",\"css_visual_scrolling.md\":\"b22bdee4\",\"demo_index.md\":\"90a5f28c\",\"es6_array.md\":\"b2d9c780\",\"es6_decorator.md\":\"0155aa71\",\"es6_function.md\":\"b2a54be3\",\"es6_generator.md\":\"ab397709\",\"es6_module.md\":\"8074618d\",\"es6_object.md\":\"02960089\",\"es6_promise.md\":\"ba7c72e0\",\"es6_proxy.md\":\"5d343ca0\",\"es6_set_map.md\":\"16366c0a\",\"es6_var_let_const.md\":\"94c5a2e5\",\"git_git.md\":\"81cfa072\",\"git_head_tree_index.md\":\"8da2b48e\",\"git_command.md\":\"d398f681\",\"git_conflict.md\":\"6ace32b7\",\"git_fork_clone_branch.md\":\"60d8b215\",\"git_git_pull_git_fetch.md\":\"7ba61a26\",\"git_git_rebase_git_merge.md\":\"24044b46\",\"git_git_reset_git_revert.md\":\"0573874e\",\"git_git_stash.md\":\"b2108bb4\",\"git_version_control.md\":\"5315b3a1\",\"http_1.0_1.1_2.0.md\":\"f4855f53\",\"http_cdn.md\":\"8db3cb9d\",\"http_dns.md\":\"5bb40fe6\",\"http_get_post.md\":\"54952aa8\",\"http_https.md\":\"42a442c8\",\"http_http_https.md\":\"584d2870\",\"http_osi.md\":\"feab35f0\",\"http_tcp_ip.md\":\"9a3280d8\",\"http_udp_tcp.md\":\"8d5731e8\",\"http_websocket.md\":\"b78e9a8f\",\"http_after_url.md\":\"ed13fb23\",\"http_handshakes_waves.md\":\"7f21a38c\",\"http_headers.md\":\"77af020f\",\"http_status.md\":\"731daad7\",\"index.md\":\"b249642b\",\"typescript_class.md\":\"3bc756f0\",\"typescript_data_type.md\":\"8b852fca\",\"typescript_decorator.md\":\"09934301\",\"typescript_enum.md\":\"f05a48e4\",\"typescript_function.md\":\"aa1f6c95\",\"typescript_generic.md\":\"066edb51\",\"typescript_high type.md\":\"bdf59b40\",\"typescript_interface.md\":\"3ebee750\",\"typescript_namespace_module.md\":\"2af77e9c\",\"typescript_react.md\":\"6ca91139\",\"typescript_typescript_javascript.md\":\"e89507d8\",\"typescript_vue.md\":\"a39dd1b5\",\"vue_404.md\":\"1b714ff3\",\"vue_axios.md\":\"a1e96e5f\",\"vue_axioscode.md\":\"fccd1ad0\",\"vue_bind.md\":\"4c20085d\",\"vue_communication.md\":\"3f059e41\",\"vue_components_plugin.md\":\"2b4f21b2\",\"vue_cors.md\":\"6aede5b3\",\"vue_data.md\":\"18d617df\",\"vue_data_object_add_attrs.md\":\"94cf2218\",\"vue_diff.md\":\"37e2c3ee\",\"vue_directive.md\":\"9b5aed0e\",\"vue_error.md\":\"347dc9f7\",\"vue_filter.md\":\"ff72d81c\",\"vue_first_page_time.md\":\"1cf8d795\",\"vue_if_for.md\":\"28139518\",\"vue_keepalive.md\":\"b8401dc5\",\"vue_key.md\":\"05160f3e\",\"vue_lifecycle.md\":\"21135238\",\"vue_mixin.md\":\"ed53004e\",\"vue_modifier.md\":\"f82a3264\",\"vue_new_vue.md\":\"0244ca48\",\"vue_nexttick.md\":\"dd0380b1\",\"vue_observable.md\":\"edc5c364\",\"vue_permission.md\":\"90cc7a15\",\"vue_show_if.md\":\"706a56de\",\"vue_slot.md\":\"820aa4ac\",\"vue_spa.md\":\"75e55e32\",\"vue_ssr.md\":\"3f6ba2de\",\"vue_structure.md\":\"170a36be\",\"vue_vnode.md\":\"a1edc5ce\",\"vue_vue.md\":\"07289420\",\"vue3_composition.md\":\"4ca97a72\",\"vue3_goal.md\":\"7224e393\",\"vue3_modal_component.md\":\"7245015a\",\"vue3_performance.md\":\"535b5faa\",\"vue3_proxy.md\":\"17acfa40\",\"vue3_treeshaking.md\":\"8732cc75\",\"webpack_hmr.md\":\"2bf5fb55\",\"webpack_loader.md\":\"5a6680be\",\"webpack_loader_plugin.md\":\"01307ebe\",\"webpack_plugin.md\":\"fb205e68\",\"webpack_rollup_parcel_snowpack_vite.md\":\"2ce2d9e1\",\"webpack_build_process.md\":\"fbd4e2e7\",\"webpack_improve_build.md\":\"496f4f12\",\"webpack_performance.md\":\"ebeffcd8\",\"webpack_proxy.md\":\"3619d807\",\"webpack_webpack.md\":\"0fddbfa8\"}")</script>
    <script type="module" async src="/assets/app.1cdb2ec5.js"></script>
    
  </body>
</html>